<template>
  <dv-charts :option="option" />
</template>

<script>

import { ReportProportion } from '@/network/request'

export default {
  name: 'RadarChart',
  props: {
    // 数据
    chartsRadarData: {
      type: Object,
      required: true
    },
    // 是否显示数值标签
    labelIsShow: {
      type: Boolean,
      required: false,
      default: false
    },
    // 是否显示为多边形坐标系
    polygonIsShow: {
      type: Boolean,
      required: false,
      default: false
    },
    // 是否显示图例
    legendIsShow: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data () {
    return {
      option: {}
    }
  },
  methods: {
    createChart () {
      // 循环数据，取出图例legend下的data数据
      const _legendData = []
      this.chartsRadarData.series.forEach((item) => {
        _legendData.push({
          name: item.name,
          nameTextStyle: { color: 'red' }
        })
      })
      // console.log(_legendData)
      // 循环数据，取出series下的data数据
      const _series = []
      this.chartsRadarData.series.forEach((item, index) => {
        _series.push({
          name: item.name,
          data: item.data,
          type: 'radar',
          label: {
            show: this.labelIsShow
          },
          animationCurve: 'easeOutBounce'
        })
      })
      ReportProportion().then(res => {
        let list = []
        list = res.data.map(item => ({
          name: item.cateName,
          value: item.count
        }))
        this.option = {
          series: [
            {
              type: 'pie',
              data: list,
              insideLabel: {
                show: true
              }
            }
          ]
        }
      })
    }
  },
  created () {
  },
  watch: {
    chartsRadarData: {
      handler (newValue, oldValue) {
        if (oldValue !== newValue) {
          this.createChart()
        }
      },
      deep: true
    }
  }
}
</script>
<style>
</style>
